<template>
	<view>
		<el-row class="tac">
			<el-col :span="2">
					<el-menu class="el-menu-demo el-menu-her" mode="vertical" router :default-active="active"  :default-openeds="openeds" >
					<view style="padding: 10px;display: flex;">
						<view>
							<el-input placeholder="请输入内容" size="mini" v-model="input">
								<el-button type="text" slot="append" size="mini" icon="el-icon-search"></el-button>
							</el-input>
						
						</view>
					</view>
					<veiw style="margin-left: 70%;">
						<el-popover placement="right" width="300" trigger="click" v-model="visible">
							<view>
								<Veiw style="display: flex;">
									<view style="margin-top: 5px;width: 70px;">
										<text style="color: red;">*</text>
										案组名：
									</view>
									<view><el-input size="mini" v-model="schemeGroupName" placeholder="请输入方案组名"></el-input></view>
								</Veiw>
								<u-gap height="20"></u-gap>
								<Veiw style="display: flex;">
									<view style="margin-top: 5px;width: 70px;">
										<text style="color: red;">*</text>
										备注：
									</view>
									<view><el-input size="mini" v-model="remarks" placeholder="请输入备注"></el-input></view>
								</Veiw>
								<view class="yujin-btu">
									<el-button type="primary" size="mini" @click="newtilte" round>确定</el-button>
									<el-button type="info" size="mini" round @click="visible = false">取消</el-button>
								</view>
							</view>
							<el-button type="primary" size="mini" slot="reference"><i class="el-icon-folder-add"></i></el-button>
						</el-popover>
					</veiw>
					 
					<template v-for="(item, i) in schemeNav" >
						<el-submenu v-if="item.schemeList.length > 0" :index="i" :key="i" >
							<template slot="title" class="edit-item">
								<el-dropdown>
									
									<span class="el-dropdown-link"><i class="el-icon-folder-opened"></i></span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item @click.native="changePut(item)">修改</el-dropdown-item>
										<el-dropdown-item @click.native="changeDELETE(item)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<span>{{ item.schemeGroupName }}</span>
								<!-- 编辑按钮 -->
								<!-- <el-dropdown >
									<span class="el-dropdown-link-right"><i class="el-icon-edit-outline"></i></span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item @click.native="changePut(item)">修改</el-dropdown-item>
										<el-dropdown-item @click.native="changeDELETE(item)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown> -->
								
							</template>
							<el-menu-item v-for="(items, index) in item.schemeList" :key="index" :index="i + '-' + index" @click="menulist(items,i,index)" style="display: flex;justify-content: space-between;">
								<el-tooltip :content="items.schemeName" placement="top">
									<el-button type="text">{{ items.schemeName.length > 6 ? items.schemeName.substring(0,6) + '...' : items.schemeName }}</el-button>
								</el-tooltip>
								<!-- <el-tooltip content="评论数" placement="top">
									 <el-button>{{ items.schemeName.length > 5 ? items.schemeName.substring(0,4) + '...' : items.schemeName }}</el-button>
								</el-tooltip> -->
								<template>
									<el-popover placement="right" popper-class="popoerel" trigger="hover">
										<view>
											<el-button type="text" size="mini" @click.stop="setSchemeItem(items)">修改</el-button>
											<el-button type="text" size="mini" @click.stop="dELETEScheme(items)">删除</el-button>
											<!-- <el-button type="text" size="mini">上移</el-button>
											<el-button type="text" size="mini">下移</el-button> -->
										</view>
										<i class="el-icon-s-tools" slot="reference"></i>
										<!-- 在新窗口打开 -->
										<!-- <el-button slot="reference" @click="gotoNewIndex(items)">点击此处在新窗口打开</el-button> -->
									</el-popover>
								</template>
							</el-menu-item>
						
						</el-submenu>
						
						<el-menu-item v-else :index="i" :key="i">
							<template slot="title">
								<el-dropdown>
									<span class="el-dropdown-link"><i class="el-icon-folder-opened"></i></span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item @click.native="changePut(item)">修改</el-dropdown-item>
										<el-dropdown-item @click.native="changeDELETE(item)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<span>{{ item.schemeGroupName }}</span>
								<!-- 编辑按钮 -->
								<!-- <el-dropdown>
									<span class="el-dropdown-link-right"><i class="el-icon-edit-outline"></i></span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item @click.native="changePut(item)">修改</el-dropdown-item>
										<el-dropdown-item @click.native="changeDELETE(item)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown> -->
							</template>
						</el-menu-item>
					</template>
					
					
					<view class="btu-center-1"><el-button type="primary" size="mini" @click="newCreate">创建方案</el-button></view>
				</el-menu>
			</el-col>
		</el-row>
		<el-dialog title="修改方案组" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="案组名" :label-width="formLabelWidth"><el-input v-model="form.schemeGroupName" autocomplete="off"></el-input></el-form-item>
				<el-form-item label="备注" :label-width="formLabelWidth"><el-input v-model="form.remarks" autocomplete="off"></el-input></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="putSchemeGroup">确 定</el-button>
			</div>
		</el-dialog>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formLabelWidth: '120px',
			dialogFormVisible: false,
			form: {
				id: '',
				schemeGroupName: '',
				remarks: ''
			},
			input: '',
			schemeGroupName: '',
			remarks: '',
			SchemeList: '',
			visible: false,
			active: '0-0',
			openeds: [0],
			NavigateItem: [
				{
					title: '默认组',
					key: '0',
					path: '',
					items: [
						{
							title: '铜仁社区',
							key: '0-1',
							path: '/pages/Favorites/Favorites-List'
						},
						{
							title: '贵阳社区',
							key: '0-2',
							path: ''
						}
					]
				},
				{
					title: '高考',
					key: '1',
					path: '',
					items: [
						{
							title: '贵阳高考',
							key: '1-1',
							path: ''
						},
						{
							title: '全国高考',
							key: '1-2',
							path: ''
						}
					]
				},
				{
					title: '提身价',
					key: '4',
					path: '',
					items: [
						{
							title: '选项1',
							key: '4-1',
							path: ''
						},
						{
							title: '选项2',
							key: '4-2',
							path: ''
						}
					]
				}
			],
			schemeNav: [],
			visible1: false,
			
			
		};
	},
	// 接收来自父组件的值
	
	props:{
		activeQueryList:{
			type:Object
		}
	},
	created() {
	
	
	
	console.log('activeQueryList');
	// console.log(activeQueryList);
	console.log(this.activeQueryList);
	// 根据预警设置页面的id来判断
	if(this.activeQueryList.id) {
		this.active = this.activeQueryList.i + '-' + this.activeQueryList.index
	}
	// this.active = this.activeQueryList.i + '-' + this.activeQueryList.index
	console.log('this.active',this.active);
	
		
		
		this.SchemeGrouplist();
		uni.$on("putSucess",(e)=>{
			this.SchemeGrouplist()
		})
		
		
		
		
		
	},
	methods: {
		// 跳转到新页面点击
		gotoNewIndex(item) {
			this.$emit('gotoNewIndex',item);
		},
		menulist(item,i,index) {
			if(typeof(i) !== 'undefined') {
				this.active = i + '-' + index
			}
			// this.$emit('click', item);
			let activeQuery = {
				item,i,index
			}
			
			this.$emit('click', activeQuery);
		},
		setSchemeItem(item) {
			this.$emit('SchemeItem', item);
		},
		//查询方案组列表
		SchemeGrouplist() {
			this.$api
				.searchSchemeGrouplist()
				.then(res => {
					
					if (res.data.code == 200) {
						this.schemeNav = res.data.data.rows;
						if(this.activeQueryList && this.activeQueryList.i) {
							console.log('this.schemeNav',this.schemeNav);
							console.log('this.activeQueryList.i',this.activeQueryList.i);
							console.log('this.activeQueryList.index',this.activeQueryList.index);
							console.log('this.schemeNav[this.activeQueryList.i]',this.schemeNav[this.activeQueryList.i]);
							
							var QueryIndex = JSON.parse(this.activeQueryList.index);//第一种
							
							// this.menulist(this.schemeNav[0].schemeList[0])
							this.menulist(this.schemeNav[this.activeQueryList.i].schemeList[QueryIndex])
							console.log('this.menulist(this.schemeNav[this.activeQueryList.i].schemeList[this.activeQueryList.index])',this.menulist(this.schemeNav[this.activeQueryList.i].schemeList[QueryIndex]));
						} 
						// 默认选中第一个方案文件夹的第一项
						console.log('this.activeQueryList.id',this.activeQueryList.id);
						// 如果没有接收到从预警设置传过来的方案的id
						if (!this.activeQueryList.id) {
							if(this.schemeNav.length > 0 && this.schemeNav[0].schemeList.length) this.menulist(this.schemeNav[0].schemeList[0])
						}
						// if(this.schemeNav.length > 0 && this.schemeNav[0].schemeList.length) this.menulist(this.schemeNav[0].schemeList[0])
					
					} else {
					  this.$message.error(res.data.msg || '获取数据失败')
				  }
				})
				.catch(err => {
					console.log('查询错误', err);
				});
				
		},

		newCreate() {
			uni.navigateTo({
				url: '/pages/Alert/CreateThere/CreateThere'
			});
		},
		newtilte() {
			console.log(this.schemeGroupName + '-' + this.remarks);
			this.$api
				.searchSchemeGroup({
					data: {
						schemeGroupName: this.schemeGroupName,
						remarks: this.remarks
					}
				})
				.then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.visible = false;
					}
				})
				.catch(err => {
					console.log('查询错误', err);
				});
		},
		changePut(item) {
			(this.form = {
				id: item.id,
				schemeGroupName: item.schemeGroupName,
				remarks: item.remarks
			}),
				(this.dialogFormVisible = true);
		},
		putSchemeGroup() {
			this.$api
				.putSchemeGroup({
					data: {
						id: this.form.id,
						schemeGroupName: this.form.schemeGroupName,
						remarks: this.form.remarks
					}
				})
				.then(res => {
					if (res.data.code == 200) {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.SchemeGrouplist();
						this.dialogFormVisible = false;
					} else {
						this.$message.error(res.data.msg || '修改失败');
					}
				});
		},
		changeDELETE(item) {
			this.$confirm('确定要删除方案组' + item.schemeGroupName + '吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$api
						.deleteSchemeGroup({
							data: {
								ids: item.id
							}
						})
						.then(res => {
							console.log(res);
							if (res.data.code == 200) {
								this.$message({
									message: '删除成功',
									type: 'success'
								});
								this.SchemeGrouplist();
							} else {
								this.$message.error(res.data.msg || '删除失败');
							}
						});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		dELETEScheme(items) {
			this.$confirm('确定要删除方案' + items.schemeName + '吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$api
						.deletesearchScheme({
							data: {
								ids: items.id
							}
						})
						.then(res => {
							console.log(res);
							if (res.data.code == 200) {
								this.$message({
									message: '删除成功',
							  type: 'success'
								});
								this.SchemeGrouplist();
							} else {
								this.$message.error(res.data.msg || '删除失败');
							}
						});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},


	

	}
};
</script>

<style lang="scss" scoped>
.el-menu-her {
	height: calc(100vh - 110px);
	overflow-y: auto;
	width: 200px;
	font-size: 8px;
}
.el-button--text {
	color: #000000;
}
.el-popover.popoerel {
	width: 80px;
	padding: 10px 30px;
	background-color: aquamarine;
}
.el-submenu .el-menu-item{
	padding: 0px 20px 0px 0px;
}
.btu-center-1 {
	text-align: center;
	position: fixed;
	left: 1%;
	bottom: 10px;
}

.yujin-btu {
	display: flex;
	align-items: center;
	margin: auto;
	// background-color: aqua;
	padding: 10px;
	justify-content: center;
}

.el-dropdown-link-right {
	margin-left: 2px;
}

.edit-item {
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
}
.el-icon-edit-outline {
	margin-top: -3px;
}
.el-icon-folder-opened {
	margin-top: -3px;
}






</style>
